<template>
    <div class="topicWrapper">
        <span>{{index}}.</span>
        <span>{{question}}</span>      
        <br><br>
        <div class="answerWrapper" v-if="type === '单选题'">
            <el-radio v-model="value" label="A" :disabled="this.disabled">{{answer.A}}</el-radio>
            <el-radio v-model="value" label="B" :disabled="this.disabled">{{answer.B}}</el-radio>
            <el-radio v-model="value" label="C" :disabled="this.disabled">{{answer.C}}</el-radio>
            <el-radio v-model="value" label="D" :disabled="this.disabled">{{answer.D}}</el-radio>           
            <div class="explain" v-if="status === 'finishS'">
                <br><br>
                <span>正确答案：{{answerValueT}}</span>
                <br><br>
                <span>本题解析：{{answerExplain}}</span>
            </div> 
            <br><br>
            <div class="arrow" v-if="status == 'edit'">
                <el-button class="button" type="success" icon="arrow-up" v-on:click="upTopic()"></el-button>
                <el-button class="button" type="success" icon="arrow-down" v-on:click="downTopic()"></el-button>
                <el-button class="button" type="danger" icon="delete" v-on:click="deleteTopic()"></el-button>
            </div>     
        </div>

        <div class="answerWrapper" v-if="type === '多选题'">
            <el-checkbox-group v-model="list">
                <el-checkbox label="A" :disabled="this.disabled">{{answer.A}}</el-checkbox>
                <el-checkbox label="B" :disabled="this.disabled">{{answer.B}}</el-checkbox>
                <el-checkbox label="C" :disabled="this.disabled">{{answer.C}}</el-checkbox>
                <el-checkbox label="D" :disabled="this.disabled">{{answer.D}}</el-checkbox>
            </el-checkbox-group>
            <div class="explain" v-if="status === 'finishS'">
                <br><br>
                <span>正确答案：{{answerValueT}}</span>
                <br><br>
                <span>本题解析：{{answerExplain}}</span>
            </div>
            <br>
            <div class="arrow" v-if="status == 'edit'">
                <el-button class="button" type="success" icon="arrow-up" v-on:click="upTopic()"></el-button>
                <el-button class="button" type="success" icon="arrow-down" v-on:click="downTopic()"></el-button>
                <el-button class="button" type="danger" icon="delete" v-on:click="deleteTopic()"></el-button>
            </div>
        </div>

        <div class="answerWrapper" v-if="type === '判断题'">
            <el-radio v-model="value" label="A" :disabled="this.disabled">{{answer.A}}</el-radio>
            <el-radio v-model="value" label="B" :disabled="this.disabled">{{answer.B}}</el-radio>      
            <div class="explain" v-if="status === 'finishS'">
                <br><br>
                <span>正确答案：{{answerValueT}}</span>
                <br><br>
                <span>本题解析：{{answerExplain}}</span>
            </div>
            <br><br>
            <div class="arrow" v-if="status == 'edit'">
                <el-button class="button" type="success" icon="arrow-up" v-on:click="upTopic()"></el-button>
                <el-button class="button" type="success" icon="arrow-down" v-on:click="downTopic()"></el-button>
                <el-button class="button" type="danger" icon="delete" v-on:click="deleteTopic()"></el-button>
            </div>
        </div>

        <div class="answerWrapper" v-if="type === '问答题'">
            <el-input
                type="textarea"
                :autosize="{ minRows: 4, maxRows: 8}"
                placeholder="请输入内容"
                v-model="value"
                :disabled="this.disabled">
            </el-input>         
            <div class="explain" v-if="status === 'finishS'">
                <br><br>
                <span>正确答案：{{answerValueT}}</span>
                <br><br>
                <span>本题解析：{{answerExplain}}</span>
            </div>
            <br><br>
            <div class="arrow" v-if="status == 'edit'">
                <el-button class="button" type="success" icon="arrow-up" v-on:click="upTopic()"></el-button>
                <el-button class="button" type="success" icon="arrow-down" v-on:click="downTopic()"></el-button>
                <el-button class="button" type="danger" icon="delete" v-on:click="deleteTopic()"></el-button>
            </div>
        </div>

        <div class="answerWrapper" v-if="type === '作图题'">
            <el-upload           
                accept="image/*"
                list-type="picture-card"
                :action="this.action"
                :on-preview="preview"  
                :on-success="success"
                :on-remove="remove"  
                :file-list="fileList">
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog v-model="show" size="small">
                <img width="100%" :src="value">
            </el-dialog>
            <br>
            <div v-if="status === 'finishS'" style="font-size: 10px; color: red;">
                <span v-if="status === 'finishS'" style="font-size: 10px; color: red;">本题解析：{{answerExplain}}</span>
                <br><br>
                正确答案: 
                <br>         
                <img v-for="item in answerValueT" :src="item.url" style="width: 300px; height: 300px;"><br><br><br>
            </div>
            <div class="arrow" v-if="status == 'edit'">
                <el-button class="button" type="success" icon="arrow-up" v-on:click="upTopic()"></el-button>
                <el-button class="button" type="success" icon="arrow-down" v-on:click="downTopic()"></el-button>
                <el-button class="button" type="danger" icon="delete" v-on:click="deleteTopic()"></el-button>
            </div>
        </div>
        <br>
    </div>
</template>

<script>
    export default{
        props: {
            id: Number,
            index: Number,
            question: String,
            type: String,
            status: String,
            answer: Object,
            answerValueS: Object|String,
            answerValueT: Object|String,
            answerExplain: String
        },
        mounted: function() {
            if(this.status == "finishS" || this.status == undefined || this.status == 'edit' ) {
                this.disabled = true
                this.action = ''
            }
            if(typeof(this.answerValueS)=="string") {
                this.value = this.answerValueS
            }
            else if(this.type == "多选题") {
                this.list = this.answerValueS
            } 
            else if(this.type == "作图题") {
                this.fileList = this.answerValueS
            }   
        },
        data: function() {
            return {
                value: "",
                list: [],
                fileList: [],
                show: false,
                action: "//jsonplaceholder.typicode.com/posts/",
                disabled: false
            }
        },
        methods: {
            success(response,file,fileList) {
                this.fileList = fileList
            },
            preview(file) {            
                this.value = file.url
                this.show = true;
            },
            remove(file,fileList) { 
                if(this.status == 'finishS' || this.status == undefined){
                    fileList.push(file)
                }            
            },
            upTopic: function() {
                this.$emit("listen",'up',this.index)
            },
            downTopic: function() {
                this.$emit("listen",'down',this.index)
            },
            deleteTopic: function() {
                this.$emit("listen",'delete',this.index)
            },
        },
        watch: {
            value: function(now) {
                this.$emit("listen",now,this.id)
            },
            list: function(now) {
                this.$emit("listen",now,this.id)
            },
            fileList: function(now) {
                this.$emit("listen",now,this.id)
            }
        } 
    }
</script>

<style scoped>
    .explain{
        font-size: 10px;
        color: red;
    }
    .topicWrapper{
        position: relative;
        width: 80%;
    }
    .arrow{
        position: absolute;
        width: 200px;
        top: 0px;
        left: 560px;
    }
    .button {
        width: 40px;
        height: 40px;
        padding-left: 12px;
        border-radius: 100%;
    }
</style>
